<template>
  <el-dialog
      :visible.sync="dialogVisible"
      width="300px"
      :before-close="closeDialog"
      append-to-body
      title="更新状态"
  >


    <el-form  :label-position="labelPosition"  label-width="70px" ref="form" :model="form"  v-loading="loading">
      <el-form-item prop="status" label="类别名称">
        <el-select v-model="form.status" placeholder="请选择">
          <el-option
              v-for="item in changeStatusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div class="btn-group">
      <el-button type="text" size="small" plain @click="closeDialog">取消</el-button>
      <el-button type="primary"  size="small" :disabled="loading" @click="submit">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {addClass} from '@/api/workflowInterface'
import {changeStatus} from "@/api/workflowProcess";

export default {
  data(){
    return {
      labelPosition:'right',
      dialogVisible: false,
      loading: false,
      form: {
        processId:"",
        status:"",
      },
      changeStatusOptions:[
          {
            value: 'DRAFT',
            label: '草稿'
          },
          {
            value: 'PUBLISH',
            label: '发布'
          },
          {
            value: 'DEPRECATED',
            label: '废弃'
          }
      ]
    }
  },
  created(){

  },
  methods:{
    showDialog(row){
      this.dialogVisible = true;
      this.form.processId = row.processId;
    },
    closeDialog(){
      this.form = {}
      this.dialogVisible = false
      this.loading = false
    },

    submit(){
      this.$refs.form.validate(async valid => {
        if(valid){
          try{
            this.loading = true
            let res = await changeStatus(this.form);
            if(res.status === '200'){
              this.$message.success('更新成功')
              this.closeDialog()
              this.$emit('success',res.data)
            }else{
              this.$message.error(res.msg)
              this.loading = false
            }
          }catch{
            this.loading = false
          }
        }
      });
    }
  }
}
</script>
<style lang="scss" scoped>
.btn-group{
  display: flex;
  justify-content: right;
  .el-button{
    width: 50px;
  }
}
.el-form-item{
  height: 40px;
}
</style>